<template>
	<view class="after-sales-record">
		<!-- 售后记录列表 -->
		<view class="record-list">
			<view 
				class="record-item" 
				v-for="(record, index) in records" 
				:key="index"
			>
				<!-- 头部信息 -->
				<view class="record-header">
					<view class="header-left">
						<view class="return-tag" :class="getTagClass(record.type)">{{ record.typeText }}</view>
						<text class="order-number">订单号: {{ record.orderNumber }}</text>
					</view>
					<text class="timestamp">{{ record.timestamp }}</text>
				</view>
				
				<!-- 商品信息 -->
				<view class="product-info">
					<image :src="record.productImage" class="product-image"></image>
					<view class="product-details">
						<text class="product-name">{{ record.productName }}</text>
						<text class="product-specs">商品属性规格</text>
					</view>
					<text class="status-text" :class="getStatusClass(record.status)">
						{{ record.status }}
					</text>
				</view>
				
				<!-- 底部金额和取消按钮 -->
				<view class="record-footer">
					<view class="left-section">
						<text class="refund-amount">
							{{ record.refundType }} ¥ {{ record.amount.toFixed(2) }}
						</text>
					</view>
					<view class="right-section">
						<button 
							class="cancel-btn" 
							@click="cancelRecord(record)"
							v-if="record.canCancel"
						>
							取消{{ record.typeText }}
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				records: [
					{
						orderNumber: '563566287',
						timestamp: '2018.08.18 18:08',
						productImage: '/static/c3.png',
						productName: '甜美V领荷叶袖T恤',
						status: '已退款',
						refundType: '实退',
						amount: 168.00,
						type: 'refund', // refund: 退货, exchange: 换货
						typeText: '退货',
						canCancel: false // 已完成的不可以取消
					},
					{
						orderNumber: '542850536',
						timestamp: '2018.08.18 18:08',
						productImage: '/static/c2.png',
						productName: '黄色装饰领T恤',
						status: '官方收货',
						refundType: '应退',
						amount: 168.00,
						type: 'refund',
						typeText: '退货',
						canCancel: true // 进行中的可以取消
					},
					{
						orderNumber: '710808835',
						timestamp: '2018.08.18 18:08',
						productImage: '/static/c1.png',
						productName: '钩花蕾丝衬衣',
						status: '寄回退货',
						refundType: '应退',
						amount: 168.00,
						type: 'refund',
						typeText: '退货',
						canCancel: true
					},
					{
						orderNumber: '948139532',
						timestamp: '2018.08.18 18:08',
						productImage: '/static/c3.png',
						productName: '甜美V领荷叶袖T恤',
						status: '客服受理',
						refundType: '应换',
						amount: 0.00,
						type: 'exchange',
						typeText: '换货',
						canCancel: true
					}
				]
			}
		},
		methods: {
			// 获取状态样式类
			getStatusClass(status) {
				switch (status) {
					case '已退款':
						return 'status-refunded';
					case '官方收货':
						return 'status-received';
					case '寄回退货':
						return 'status-returned';
					case '客服受理':
						return 'status-processing';
					default:
						return '';
				}
			},
			// 获取标签样式类
			getTagClass(type) {
				return type === 'exchange' ? 'exchange-tag' : 'refund-tag';
			},
			// 取消记录
			cancelRecord(record) {
				// 根据类型跳转到对应的取消页面
				if (record.type === 'exchange') {
					// 跳转到取消换货页面
					uni.navigateTo({
						url: '/pages/yzmHcancel/yzmHcancel'
					});
				} else {
					// 跳转到取消退货页面
					uni.navigateTo({
						url: '/pages/yzmTcancel/yzmTcancel'
					});
				}
			}
		}
	}
</script>

<style>
page {
	background-color: #f5f5f5;
}

.after-sales-record {
	min-height: 100vh;
	padding: 15px;
}

.record-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.record-item {
	background-color: #fff;
	border-radius: 8px;
	padding: 15px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 头部信息 */
.record-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.return-tag {
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
}

.refund-tag {
	background-color: transparent;
	border: 1px solid #ff4757;
	color: #ff4757;
}

.exchange-tag {
	background-color: transparent;
	border: 1px solid #007aff;
	color: #007aff;
}

.order-number {
	font-size: 14px;
	color: #333;
	font-weight: 500;
}

.timestamp {
	font-size: 12px;
	color: #999;
}

/* 商品信息 */
.product-info {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.product-image {
	width: 80px;
	height: 80px;
	border-radius: 4px;
	margin-right: 12px;
	object-fit: cover;
}

.product-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.product-name {
	font-size: 14px;
	color: #333;
	line-height: 1.4;
}

.product-specs {
	font-size: 12px;
	color: #999;
	line-height: 1.4;
}

.status-text {
	font-size: 14px;
	font-weight: 500;
	margin-left: 12px;
}

.status-refunded {
	color: #ff4757;
}

.status-received {
	color: #ff4757;
}

.status-returned {
	color: #ff4757;
}

.status-processing {
	color: #007aff;
}

/* 底部金额和取消按钮 */
.record-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.left-section {
	flex: 1;
}

.refund-amount {
	font-size: 14px;
	color: #333;
	font-weight: 500;
}

.right-section {
	display: flex;
	align-items: center;
}

.cancel-btn {
	background-color: #fff;
	border: 1px solid #ddd;
	color: #666;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.3s;
}

.cancel-btn:hover {
	border-color: #ff4757;
	color: #ff4757;
}
</style>
